<template>
  <tm-app>
    <tm-navbar title="收益记录" :followTheme="true" :hideHome="true">
    </tm-navbar>
    <ad unit-id="adunit-afce6acaee5222a4"></ad>
    <tm-sheet :margin="[0]" :padding="[0, 10, 0, 10]" :transprent="true">
      <tm-sheet
        :padding="[20]"
        :margin="[30, 10, 30, 10]"
        :round="4"
        v-for="(item, index) in state.list"
        :key="index"
        _class="flex flex-row flex-row-center-start"
      >
        <!-- <tm-avatar
          img="https://picsum.photos/200/300"
          class="mr-n4"
          :size="100"
          :round="12"
        ></tm-avatar> -->
        <tm-sheet :margin="[0]" :padding="[20]" class="flex-1">
          <tm-sheet :margin="[0]" :padding="[0]">
            <view class="flex flex-row flex-row-center-between">
              <tm-text :fontSize="32"
                >收益金额: {{ item.incomeAmount }}
              </tm-text>
              <tm-text :fontSize="32">{{ item.incomeDateTime }}</tm-text>
            </view>
            <view>
              <tm-text
                color="#666"
                :font-size="24"
                :label="item.remark"
              ></tm-text>
            </view>
          </tm-sheet>
        </tm-sheet>
      </tm-sheet>
    </tm-sheet>
  </tm-app>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { getIncomeRecordListApi } from "@/api";
import { onReachBottom } from "@dcloudio/uni-app";
const state = reactive({
  list: [],
  page: {
    pageNo: 1,
    pageSzie: 10,
  },
  total: 0,
});
onMounted(async () => {
  getIncomeRecordList();
});
const getIncomeRecordList = async () => {
  if (state.total != 0 && state.total == state.list.length) return;
  const res = await getIncomeRecordListApi(state.page);
  state.list.push(...res.records);
  state.total = res.total;
};
onReachBottom(() => {
  if (state.total == state.list.length) return;
  state.page.pageNo += 1;
  getIncomeRecordList();
});
</script>

<style scoped></style>
